<template>
  <div class="web-hot-content">
    <web-hot-box class="baidu-hot-box" v-if="baiduHot.links.length" :hotJson="baiduHot" @refresh="refresh" />
    <web-hot-box class="weibo-hot-box" v-if="weiboHot.links.length" :hotJson="weiboHot" @refresh="refresh" />
    <web-hot-box class="zhihu-hot-box" v-if="zhihuHot.links.length" :hotJson="zhihuHot" @refresh="refresh" />
    <web-hot-box class="toutiao-hot-box" v-if="toutiaoHot.links.length" :hotJson="toutiaoHot" @refresh="refresh" />
    <web-hot-box class="today-hot-box" v-if="todayHot.links.length" :hotJson="todayHot" @refresh="refresh" />
    <web-tools class="web-tools" v-if="!isMobile" />
  </div>
</template>

<script lang="ts" setup>
import { open } from '@/api/open'
import WebHotBox from '@/components/web/WebHotBox.vue'
import WebTools from '@/components/web/WebTools.vue'
import { onMounted, reactive } from 'vue'

const isMobile = window.isMobile
const baiduHot = reactive({ title: '百度热榜', links: [] })
const weiboHot = reactive({ title: '微博热榜', links: [] })
const zhihuHot = reactive({ title: '知乎热榜', links: [] })
const toutiaoHot = reactive({ title: '头条热榜', links: [] })
const todayHot = reactive({ title: '历史今天', links: [] })

const refresh = (title: string) => {
  if (title === '百度热榜') {
    getHotBaidu()
  } else if (title === '微博热榜') {
    getHotWeibo()
  } else if (title === '知乎热榜') {
    getHotZhihu()
  } else if (title === '头条热榜') {
    getHotToutiao()
  } else if (title === '历史今天') {
    getHotToday()
  } else {
    console.error('refresh', title)
  }
}

const getHotBaidu = () => {
  open.link.getHotBaidu().then((res: any) => {
    if (res.code === 0) {
      baiduHot.links = JSON.parse(res.data)
    }
  })
}
const getHotWeibo = () => {
  open.link.getHotWeibo().then((res: any) => {
    if (res.code === 0) {
      weiboHot.links = JSON.parse(res.data)
    }
  })
}
const getHotZhihu = () => {
  open.link.getHotZhihu().then((res: any) => {
    if (res.code === 0) {
      zhihuHot.links = JSON.parse(res.data)
    }
  })
}
const getHotToutiao = () => {
  open.link.getHotToutiao().then((res: any) => {
    if (res.code === 0) {
      toutiaoHot.links = JSON.parse(res.data)
    }
  })
}

const getHotToday = () => {
  open.link.getHotToday().then((res: any) => {
    if (res.code === 0) {
      todayHot.links = JSON.parse(res.data)
    }
  })
}

onMounted(() => {
  getHotBaidu()
  getHotWeibo()
  getHotZhihu()
  getHotToutiao()
  getHotToday()
})
</script>
<style lang="scss" scoped>
.web-hot-content {
  position: absolute;
  top: 0;
  margin-top: 20px;
  margin-left: -125px;
}

@media screen and (max-width: 480px) {
  .web-hot-content {
    position: relative;
    display: flex;
    overflow-x: scroll;
    margin-left: 10px;
    margin-right: 10px;
    box-shadow: 0px 0px 20px #cccccc;
  }
}
</style>
